{% extends 'base/base.html' %}
{% load static %}

{% block title %}兑换奖品 - 妙趣积分商城{% endblock %}

{% block extra_css %}
<style>
    .points-header {
        background-color: #f0f7ff;
        border-radius: 10px;
        padding: 20px;
        margin-bottom: 30px;
    }
    
    .points-value {
        font-size: 2.5rem;
        font-weight: bold;
        color: #ff6b6b;
    }
    
    .points-label {
        color: #6c757d;
        font-size: 1rem;
    }
    
    .reward-image {
        max-width: 100%;
        border-radius: 10px;
        max-height: 300px;
        object-fit: contain;
    }
    
    .reward-card {
        border-radius: 10px;
        overflow: hidden;
        transition: all 0.3s ease;
        border: 1px solid #f0f0f0;
        margin-bottom: 20px;
    }
    
    .reward-points {
        background-color: #28a745;
        color: white;
        padding: 5px 10px;
        border-radius: 20px;
        font-weight: bold;
        display: inline-block;
        margin-bottom: 10px;
    }
</style>
{% endblock %}

{% block content %}
<div class="container py-5">
    <div class="row justify-content-center">
        <div class="col-md-8">
            <nav aria-label="breadcrumb">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="{% url 'points:index' %}">积分商城</a></li>
                    <li class="breadcrumb-item active">兑换奖品</li>
                </ol>
            </nav>
            
            <div class="points-header d-flex justify-content-between align-items-center mb-4">
                <h2 class="mb-0">兑换奖品</h2>
                <div class="text-center">
                    <div class="points-value">{{ user_points }}</div>
                    <div class="points-label">我的积分</div>
                </div>
            </div>
            
            <div class="card reward-card">
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-4 text-center">
                            <img src="{{ reward.image_url|default:'/static/images/reward-default.jpg' }}" class="reward-image" alt="{{ reward.name }}">
                        </div>
                        <div class="col-md-8">
                            <h3>{{ reward.name }}</h3>
                            <div class="reward-points">{{ reward.points_required }} 积分</div>
                            <p class="text-muted">{{ reward.description }}</p>
                            <hr>
                            
                            {% if reward.reward_type == 2 %}
                            <!-- 实物奖品需要填写收货信息 -->
                            <form method="post" class="mt-4">
                                {% csrf_token %}
                                <div class="form-group mb-3">
                                    <label for="name">收货人姓名</label>
                                    <input type="text" class="form-control" id="name" name="name" required>
                                </div>
                                <div class="form-group mb-3">
                                    <label for="phone">联系电话</label>
                                    <input type="tel" class="form-control" id="phone" name="phone" required>
                                </div>
                                <div class="form-group mb-3">
                                    <label for="address">收货地址</label>
                                    <textarea class="form-control" id="address" name="address" rows="3" required></textarea>
                                </div>
                                <button type="submit" class="btn btn-primary btn-lg mt-3">确认兑换</button>
                            </form>
                            {% else %}
                            <!-- 虚拟奖品直接兑换 -->
                            <form method="post" class="mt-4">
                                {% csrf_token %}
                                <div class="alert alert-info">
                                    <i class="fas fa-info-circle me-2"></i> 
                                    {% if reward.reward_type == 3 %}
                                    该奖品为妙趣徽章，兑换后将直接添加到您的账户中。
                                    {% else %}
                                    该奖品兑换后将直接添加到您的账户中。
                                    {% endif %}
                                </div>
                                <button type="submit" class="btn btn-primary btn-lg mt-3">确认兑换</button>
                            </form>
                            {% endif %}
                        </div>
                    </div>
                </div>
                <div class="card-footer bg-light">
                    <div class="d-flex justify-content-between align-items-center">
                        <small class="text-muted">库存: {{ reward.stock }}</small>
                        <a href="{% url 'points:index' %}" class="btn btn-outline-secondary">返回列表</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %} 